<template>
    <el-dialog :model-value="true" title="Detail" width="500" :close-on-click-modal="false" append-to-body @close="() => emits('close')">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="snum">
                <el-input v-model="form.snum" disabled />
            </el-form-item>
            <el-form-item label="datetime">
                <el-input :value="`${form.date} ${form.time}`" disabled />
            </el-form-item>
            <el-form-item label="address">
                <el-input v-model="form.address" disabled />
            </el-form-item>
            <el-form-item label="phoneNumber">
                <el-input v-model="form.phoneNumber" disabled />
            </el-form-item>
            <el-form-item label="consignee">
                <el-input v-model="form.consignee" disabled />
            </el-form-item>
            <el-form-item label="amount">
                <el-input v-model="form.amount" disabled />
            </el-form-item>
            <el-form-item label="pick up">
                <el-select v-model="form.pickup" disabled>
                    <el-option label="yes" value="yes"></el-option>
                    <el-option label="no" value="no"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="form.pickup === 'yes'" label="Pick up Time">
                <el-time-picker style="width: 100%;" value-format="HH:mm" format="HH:mm" v-model="form.pickupTime" disabled />
            </el-form-item>
            <el-form-item label="status">
                <el-select v-model="form.status" disabled>
                    <el-option v-for="item in orderStatus" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select>
            </el-form-item>

            <!-- 新增菜单信息展示 -->
            <div class="menu-title">menu</div>
            <el-table :data="menuItems" fit style="width: 100%">
                <el-table-column prop="name" label="Dish Name" />
                <el-table-column prop="count" label="Quantity" />
                <el-table-column prop="dj" label="Unit Price">
                </el-table-column>
                <el-table-column prop='zj' label="Subtotal">
                </el-table-column>
            </el-table>
        </el-form>
    </el-dialog>
</template>
<script setup>
import { orderStatus } from '../../utils/constants'
import { reactive, onMounted, computed } from 'vue'

const props = defineProps({ itemData: Object })
const form = reactive({
    name: '',
    address: '',
    snum: '',
    consignee: '',
    date: '',
    time: '',
    amount: '',
    pickup: '',
    pickupTime: '',
    phoneNumber: '',
    status: ''

})
onMounted(() => {
    Object.keys(form).map(key => form[key] = props.itemData[key])
})
const emits = defineEmits(['close', 'success'])
const onSubmit = () => {
    emits('success', form)
}

const menuItems = computed(() => props.itemData.menuItems || [])
const totalAmount = computed(() => menuItems.value.reduce((sum, item) => sum + Number(item.zj), 0))
</script>
<style lang="scss" scoped>
.menu-title {
    margin-top: 10px;
    text-align: center;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}
</style>
